<template>
    <div>
        <header class="header">
            <div class="container">
                <h2 class="text-xl" v-if="detail.career">
                    当前职业方向：<router-link :to="{name: 'career-skill', params: {career: detail.career.id}}">{{detail.career.title}}</router-link>
                </h2>
                <h1>{{detail.title}}</h1>
                <p>{{detail.description}}</p>
            </div>

        </header>

        <main class="container">
            <p>当前课程列表</p>
            <course-tree-view :courses="detail.courses" :career="$route.query.career" :skill="$route.query.skill"></course-tree-view>
        </main>
    </div>
</template>

<script>
    import CourseTreeView from '../components/CourseTreeView'

    export default {
        components: {CourseTreeView},
        data() {
            return {detail: {}, careerDetail: {}}
        },
        methods: {
            getSkill() {
                axios.get('skills/' + this.$route.params.skill, {params: {career: this.$route.query.career}}).then((res) => {
                    this.detail = res.data.data;
                })
            }
        }, created() {
            this.getSkill();
        }
    }
</script>

<style scoped>

</style>